<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item label="徽章名称" prop="name" >
        <a-input v-model="form.name" placeholder="请输入徽章名称" />
      </a-form-model-item>
      <a-form-model-item prop="imageUrl" >
        <span slot="label">
          徽章logo&nbsp;
          <a-tooltip title="建议尺寸：宽高比（1：1）正方形，透明底png格式">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <file-upload v-model="form.imageUrl" type="image"></file-upload>
      </a-form-model-item>
      <a-form-model-item prop="color" >
        <span slot="label">
          色值&nbsp;
          <a-tooltip title="建议配合logo选择对应色值">
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.color" type="color"/>
      </a-form-model-item>
      <a-form-model-item label="获得类型" prop="limitType" >
        <a-select placeholder="请选择获得类型" v-model="form.limitType">
          <a-select-option v-for="(d, index) in limitTypeOptions" :key="index" :value="d.value" >{{ d.label }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="满足累计活跃天数" prop="limitActiveNum" >
        <a-input v-model="form.limitActiveNum" placeholder="请输入满足累计活跃天数" />
      </a-form-model-item>
      <a-form-model-item label="满足参加活动次数" prop="limitActivityNum" >
        <a-input v-model="form.limitActivityNum" placeholder="请输入满足参加活动次数" />
      </a-form-model-item>
      <a-form-model-item label="满足分享活动次数" prop="limitShareNum" >
        <a-input v-model="form.limitShareNum" placeholder="请输入满足分享活动次数" />
      </a-form-model-item>
      <a-form-model-item label="满足成功参加活动次数" prop="limitActivitySucessNum" >
        <a-input v-model="form.limitActivitySucessNum" placeholder="请输入满足成功参加活动次数" />
      </a-form-model-item>
      <a-form-model-item label="描述" prop="remark" >
        <a-input v-model="form.remark" placeholder="请输入内容" type="textarea" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="状态" prop="status" >
        <a-select placeholder="请选择状态" v-model="form.status">
          <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.value" >{{ d.label }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
  import { getBadge, addBadge, updateBadge } from '@/api/system/badge'

  export default {
    name: 'CreateForm',
    props: {
        limitTypeOptions: {
            type: Array,
            required: true
          },
        statusOptions: {
            type: Array,
            required: true
          }
    },
    components: {
    },
    data () {
      return {
        submitLoading: false,
        formTitle: '',
        // 表单参数
        form: {
            id: undefined,
            name: undefined,
            imageUrl: undefined,
            color: '#E7654E',
            limitType: undefined,
            limitActiveNum: 0,
            limitActivityNum: 0,
            limitShareNum: 0,
            limitActivitySucessNum: 0,
            remark: undefined,
            status: '0',
            delFlag: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined
        },
        // 1增加,2修改
        formType: 1,
        open: false,
        rules: {
          name: [
            { required: true, message: '请填写徽章名称', trigger: 'blur' }
          ],
          imageUrl: [
            { required: true, message: '请上传徽章logo', trigger: 'change' }
          ],
          color: [
            { required: true, message: '请选择色值', trigger: 'change' }
          ],
          limitType: [
            { required: true, message: '请选择获得类型', trigger: 'change' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
        }
      }
    },
    filters: {
    },
    created () {
    },
    computed: {
    },
    watch: {
    },
    mounted () {
    },
    methods: {
      onClose () {
        this.open = false
      },
      // 取消按钮
      cancel () {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset () {
        this.formType = 1
        this.form = {
            id: undefined,
            name: undefined,
            imageUrl: undefined,
            color: '#E7654E',
            limitType: undefined,
            limitActiveNum: 0,
            limitActivityNum: 0,
            limitShareNum: 0,
            limitActivitySucessNum: 0,
            remark: undefined,
            status: '0',
            delFlag: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined
        }
      },
      /** 新增按钮操作 */
      handleAdd (row) {
        this.reset()
        this.formType = 1
        this.open = true
        this.formTitle = '添加'
      },
      /** 修改按钮操作 */
      handleUpdate (row, ids) {
        this.reset()
        this.formType = 2
        const id = row ? row.id : ids
        getBadge(id).then(response => {
          this.form = response.data
          this.open = true
          this.formTitle = '修改'
        })
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true
            if (this.form.id !== undefined && this.form.id !== null) {
              updateBadge(this.form).then(response => {
                this.$message.success('修改成功',3)
                this.open = false
                this.$emit('ok')
              }).finally(() => {
                this.submitLoading = false
              })
            } else {
              addBadge(this.form).then(response => {
                this.$message.success('新增成功',3)
                this.open = false
                this.$emit('ok')
              }).finally(() => {
                this.submitLoading = false
              })
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>
